lib/api/user/earnings.ts (2)

55-58: Add generic type parameter for type-safe API response.

Same issue as getUserEarnings - pass the expected response type to api.post<T>().

♻️ Proposed fix

 export const claimEarning = async (data: ClaimEarningRequest): Promise<ClaimEarningResponse> => {
-  const res = await api.post('/user/earnings/claim', data);
+  const res = await api.post<ClaimEarningResponse>('/user/earnings/claim', data);
   return res.data;
 };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@lib/api/user/earnings.ts` around lines 55 - 58, The API call in claimEarning
currently uses api.post without a generic result type, so make the request
type-safe by passing the expected response type to api.post (use
ClaimEarningResponse as the generic) when calling api.post in the claimEarning
function; update the call to api.post<ClaimEarningResponse>('
/user/earnings/claim', data) so res.data is correctly typed for
ClaimEarningResponse while leaving the function signature intact.

---

47-50: Add generic type parameter for type-safe API response.

The api.get<T>() method accepts a generic type parameter to properly type the response. Without it, res.data is typed as unknown.

♻️ Proposed fix

 export const getUserEarnings = async (): Promise<GetEarningsResponse> => {
-  const res = await api.get('/user/earnings');
+  const res = await api.get<EarningsData>('/user/earnings');
   return res.data;
 };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@lib/api/user/earnings.ts` around lines 47 - 50, The API call in
getUserEarnings returns untyped data; call api.get with the generic type
parameter so the response is type-safe (use GetEarningsResponse as the generic
for api.get), then return res.data which will now be correctly typed; update the
api.get call inside function getUserEarnings to
api.get<GetEarningsResponse>(...) so res.data is inferred as
GetEarningsResponse.

app/me/earnings/page.tsx (2)

22-25: Consider using const arrow function per coding guidelines.

The coding guidelines prefer const arrow functions with explicit type annotations. However, function declarations for page components are common in Next.js, so this is a minor stylistic preference.

♻️ Optional refactor

-export default function EarningsPage() {
-  const [loading, setLoading] = useState(true);
-  const [data, setData] = useState<EarningsData | null>(null);
-  const [claimingId, setClaimingId] = useState<string | null>(null);
+const EarningsPage: React.FC = () => {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<EarningsData | null>(null);
+  const [claimingId, setClaimingId] = useState<string | null>(null);

And at the end of the component:

-}
+};
+
+export default EarningsPage;

As per coding guidelines: "Prefer const arrow functions with explicit type annotations over function declarations".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/me/earnings/page.tsx` around lines 22 - 25, The component is declared as
a function declaration (EarningsPage); change it to a const arrow function with
an explicit type annotation per guidelines: replace the `export default function
EarningsPage()` declaration with a `const`-declared arrow component (e.g.,
`const EarningsPage: React.FC` or appropriate Next.js page type) and export it
as default; keep the existing state hooks (loading, data, claimingId) and
implementation intact while updating the declaration and export style.

---

56-57: Add error logging for consistency with fetchData.

The fetchData function logs errors to console before showing a toast (line 35), but handleClaim only shows a toast. Adding console.error would help with debugging.

♻️ Proposed fix

     } catch (error) {
+      console.error('Failed to claim earning:', error);
       toast.error('An error occurred during claiming');
     } finally {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/me/earnings/page.tsx` around lines 56 - 57, In the catch block of
handleClaim, add a console.error call to log the caught error (similar to
fetchData) before calling toast.error so errors are recorded for debugging;
locate the handleClaim function and update its catch(error) handler to
console.error(error) (or include context like "handleClaim error") then show the
toast.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

app/me/earnings/page.tsx (2)

154-167: Prefer const arrow functions with explicit type annotations.

The helper components (SummaryCard, BreakdownItem, ActivityItem, EarningsSkeleton) use function declarations. Per coding guidelines, prefer const arrow functions with explicit type annotations.

♻️ Example refactor for SummaryCard

-function SummaryCard({ title, value, icon, description }: { title: string, value: string, icon: React.ReactNode, description: string }) {
-  return (
+interface SummaryCardProps {
+  title: string;
+  value: string;
+  icon: React.ReactNode;
+  description: string;
+}
+
+const SummaryCard: React.FC<SummaryCardProps> = ({ title, value, icon, description }) => (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">{title}</CardTitle>
         {icon}
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{value}</div>
         <p className="text-xs text-muted-foreground mt-1">{description}</p>
       </CardContent>
     </Card>
-  );
-}
+);

Apply the same pattern to BreakdownItem, ActivityItem, and EarningsSkeleton. As per coding guidelines: "Prefer const arrow functions with explicit type annotations over function declarations."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/me/earnings/page.tsx` around lines 154 - 167, Replace the function
declarations with const arrow-function components and add explicit type
annotations for props: convert SummaryCard, BreakdownItem, ActivityItem, and
EarningsSkeleton into const SummaryCard: React.FC<{ title: string; value:
string; icon: React.ReactNode; description: string }> = ({ title, value, icon,
description }) => { ... } (and similarly define precise prop types for
BreakdownItem and ActivityItem and type EarningsSkeleton as React.FC or a
specific props type if needed); update the component definitions and exports to
use these const arrow functions so they follow the codebase guideline.

---

76-76: Consider styling the empty state for consistency.

The "No data found" fallback is unstyled, while other states (loading skeleton, empty activities list at line 135) have proper styling. Consider matching the styling for a consistent UX.

♻️ Suggested improvement

-  if (!data) return <div>No data found.</div>;
+  if (!data) {
+    return (
+      <div className="container mx-auto py-8">
+        <p className="text-center text-muted-foreground py-8">No earnings data found.</p>
+      </div>
+    );
+  }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/me/earnings/page.tsx` at line 76, Replace the unstyled fallback `if
(!data) return <div>No data found.</div>;` with the same styled empty-state
markup/component used for the activities empty state (the JSX rendered when
activities are empty) so the messaging matches loading/empty UI; find the empty
activities JSX (the block that displays the empty activities list) and reuse its
container, classes or dedicated EmptyState component, replacing the plain "No
data found." text so the empty state looks consistent with other states.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.